<script lang="ts" setup>
import { ref, onUnmounted } from "vue";
import emitter from '@/views/utils/emitter'

defineOptions({
    name: "Child",
});

defineProps(["titel"]);


//--================= Data
let toy = ref("Hello Methods");

//--================= Methods

function ClickMe() {
    toy.value = "父组件调用"
}

emitter.on('send-toy', (value) => {
    console.log(value);
})

//--================= Other
//不卸载也没事， 但是最好卸载。 因为会一直占在内存中
onUnmounted(() => {
    emitter.off("send-toy");
})


</script>

<template>
    <div class="main2">
        <h4>子组件</h4>
        <hr>
        父组件给的Titel:{{ titel }}

        <br>
        <button @click="ClickMe()">留给父组件调用的</button> <br>
        <button @click="emitter.emit('send-Userinfo')">通过Emitter调用方法</button>

        {{ toy }}


    </div>

</template>

<style scoped>
.main2 {
    background-color: skyblue;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 0 10px;
    min-height: 400px;
}
</style>
